<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-2 flex v-align-c">
      <span></span>
      <i>图片轮播</i>
    </h2>
    <h3 class="pancel-s-title">图片设置</h3>
    <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
      <div class="border-box near-box">
        <h4>样式风格</h4>
        <div class="mar-t--5 mar-b--10">
          <el-form-item>
            <div class="font-14">
              <el-row>
                <el-col :span="8">
                  <el-radio v-model="details.propMap.swiperStyle" label="10" @change="changeStyle(10)">风格一</el-radio>
                </el-col>
                <el-col :span="8">
                  <el-radio v-model="details.propMap.swiperStyle" label="11" @change="changeStyle(11)">风格二</el-radio>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="border-box">
        <h4>边距</h4>
        <div class="mar-t--5 mar-b--10">
          <el-form-item>
            <div class="v-align-c font-12">
              <span>上下</span>
              <el-slider v-model="details.propMap.verticalMargin" class="flex-item mar-l-15" :max="50"></el-slider>
              <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" :max="50" v-model="details.propMap.verticalMargin" @input="marginChange(details, 'verticalMargin',  $event)">
                <template slot="append">px</template>
              </el-input>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="v-align-c font-12">
              <span>左右</span>
              <el-slider v-model="details.propMap.horizontalMargin" class="flex-item mar-l-15" :max="50"></el-slider>
              <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" :max="50" v-model="details.propMap.horizontalMargin" @input="marginChange(details, 'horizontalMargin', $event)">
                <template slot="append">px</template>
              </el-input>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="v-align-c font-12">
              <span>圆角</span>
              <el-slider v-model="details.propMap.radius" class="flex-item mar-l-15" :max="50"></el-slider>
              <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" :max="50" v-model="details.propMap.radius" @input="marginChange(details, 'radius', $event)">
                <template slot="append">px</template>
              </el-input>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="mar-l--25 mar-t--28 pad-b-15">
        <h3 class="pancel-s-title">添加图片</h3>
      </div>
      <div class="border-box">
        <h4>图片</h4>
        <div>
          <div class="pancel-tips-bar">建议图片宽度750px，高度跟随第一张图片的高度变化</div>
          <template v-if="details.swiperList">
            <draggable id="content-box flex-item" v-model="details.swiperList" dragable="true" :move="getdata" @update="datadragEnd">
              <div v-for="(item, index) in details.swiperList" :key="'carousel-list-' + index">
                <el-form-item class="border-pic-bar carousel-u-bar pad-6">
                  <div class="carousel-u-close" @click="removeCarousel(item)">
                    <i class="el-icon-error" />
                  </div>
                  <div class="flex v-align-c">
                    <img class="width-12 height-10 mar-r-12 mar-l-6" :src="iconDrag" alt="">
                    <div class="height-60 mar-r-10">
                      <el-upload class="avatar-uploader"
                      action="/api/common/uploadFiles"
                      accept="image/jpeg,image/gif,image/png,image/bmp"
                      list-type="picture-card-ms"
                      :before-upload="beforeUpload" name="files"
                      :data="token" :show-file-list="false" :on-success="(res)=> handleUploadSuccess(res, index)">
                        <img v-if="item.imgUrl" :src="item.imgUrl + '?imageView2/1/w/60/h/60/q/100'" width="60px" height="60px">
                        <div v-else class="default-p-pic">
                          <div class="default-p-img"></div>
                          <div class="default-p-t">上传图片</div>
                        </div>
                      </el-upload>
                    </div>
                    <div class="flex-item mar-r-10">
                      <div class="mini-sbar-input cursor-p" :class="item.linkRemark ? '' : 'default-sbar-input'"
                        @click="linkLayer(item)">{{ item.linkRemark ? item.linkRemark : '请选择链接' }}</div>
                    </div>
                  </div>
                </el-form-item>
              </div>
            </draggable>
            <div class="flex pad-b-15" v-if="details.swiperList.length < swiperLength">
              <el-button class="flex-item" @click="addPictures">
                <i class="el-icon-plus mar-r-5"></i>添加
                <span class="font-12">{{ details.swiperList.length }}/{{ swiperLength }}</span>
              </el-button>
            </div>
          </template>          
        </div>
      </div>
    </el-form>
    <!-- 链接设置弹层 -->
    <el-dialog title="链接选择器" :visible.sync="linkSetVisible" :close-on-press-escape="true" width="850px">
      <!-- appType 13 为主播小程序 -->
      <component-link-layer v-if="appType !== 13" :appType="appType" v-on:selectLink="setLinkTemp"></component-link-layer>
      <component-anchor-link-layer v-else v-on:selectLink="setLinkTemp"></component-anchor-link-layer>
      <div slot="footer" class="dialog-footer" v-if="false">
        <el-button @click="linkSetVisible = false">关闭</el-button>
        <el-button type="primary" @click="setLink">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getStrByLength } from '@/utils'
  import { getToken } from '@/utils/auth'
  import elDragDialog from '@/directive/el-dragDialog'
  import ComponentLinkLayer from './../ComponentLinkLayer'
  import ComponentAnchorLinkLayer from './../ComponentAnchorLinkLayer'
  import draggable from 'vuedraggable'
  import iconDrag from '@/assets/images/icon-drag.gif'
  export default {
    components: {
      ComponentLinkLayer,
      ComponentAnchorLinkLayer,
      draggable
    },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: null
      },
      appType: {
        type: Number,
        default: 10
      }
    },
    data() {
      return {
        swiperLength: 5,
        iconDrag,
        details: {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          propMap: {
            swiperStyle: '10',
            verticalMargin: 0,
            horizontalMargin: 0,
            radius: 0
          },
          swiperList: [
            { imgUrl: '', linkRemark: '', linkType: '', linkParams: '' }
          ]
        },
        fullScreenLoading: null,
        pictureType: '1',
        linkSetVisible: false,
        link: {},
        linkTemp: {}
      }
    },
    // 初始化页面
    created() {
      this.swiperLength = this.getVersionType() * 1 === 5 ? 10 : 5
      this.resetDetails()
      this.details = this.details1
      this.details.propMap.swiperStyle = this.details1.propMap.swiperStyle
      this.details.propMap.verticalMargin = this.details1.propMap.verticalMargin * 1
      this.details.propMap.horizontalMargin = this.details1.propMap.horizontalMargin * 1
      this.details.propMap.radius = this.details1.propMap.radius * 1
      this.token = { accessToken: getToken() }
      const that = this
      this.$bus.$on('resetDetailsSwiper', function(details) {
        that.details = details
        that.details.propMap.swiperStyle = details.propMap.swiperStyle
        that.details.propMap.verticalMargin = details.propMap.verticalMargin * 1
        that.details.propMap.horizontalMargin = details.propMap.horizontalMargin * 1
        that.details.propMap.radius = details.propMap.radius * 1
      })
    },
    methods: {
      getdata(evt) {
        // 这里evt.draggedContext后续的内容根据具体的定义变量而定
      },
      datadragEnd(evt) {
        evt.preventDefault()
        const filters = this.details.swiperList
        for (let a = 0; a < filters.length; a++) {
          filters[a].index = a
        }
        this.details.swiperList = filters
      },
      changeStyle(type) {
        switch (type) {
          case 10:
            this.details.propMap.verticalMargin = 0
            this.details.propMap.horizontalMargin = 0
            this.details.propMap.radius = 0
            break
          case 11:
            if (!this.details.swiperList.length) {
              this.details.propMap.verticalMargin = 15
              this.details.propMap.horizontalMargin = 15
              this.details.propMap.radius = 15
            }
            break
        }
      },
      getStrByLength(str, n) {
        return getStrByLength(str, n)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        console.log(file)
      },
      beforeUpload(file, item) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'
        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.fullScreenLoading = this.$loading({
          lock: true,
          text: '加载中',
          background: 'rgba(255, 255, 255, 0.5)'
        })
        return (isJPG || isBMP || isGIF || isPNG)
      },
      handleUploadSuccess(res, index) {
        this.fullScreenLoading.close()
        if (res.code === 101) {
          this.details.swiperList[index].imgUrl = res.data[0]
          this.$bus.$emit('resetDetailsSwiper', this.details)
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      linkLayer(item) {
        this.link = item
        this.linkSetVisible = true
      },
      setLinkTemp(item) {
        Object.assign(this.linkTemp, item)
        this.setLink()
      },
      setLink() {
        Object.assign(this.link, this.linkTemp)
        this.linkSetVisible = false
      },
      addPictures() {
        this.details.swiperList.push({
          imgUrl: '',
          linkRemark: '',
          linkType: '',
          linkParams: ''
        })
      },
      removeCarousel(label) {
        this.details.swiperList.splice(this.details.swiperList.findIndex(item => item === label), 1)
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          propMap: {
            swiperStyle: '10',
            verticalMargin: 0,
            horizontalMargin: 0,
            radius: 0
          },
          swiperList: [
            { imgUrl: '', linkRemark: '', linkType: '', linkParams: '' }
          ]
        }
      },
      marginChange(obj, key, e) {
        // 滑块输入框触发事件
        if (this.$utils.isNumber(e)) {
          if (e * 1 > 50) {
            obj.propMap[key] = 50
          } else {
            obj.propMap[key] = e * 1
          }
        } else {
          obj.propMap[key] = 0
        }
      }
    }
  }
</script>
